<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>1.人力资源项目介绍 | 优医问诊H5</title>
    <meta name="description" content="最新Vue3技术栈,Vue3,TS,Pinia,Vant,在线问诊项目,H5">
    <link rel="preload stylesheet" href="/hm-docs/assets/style.f60a3f91.css" as="style">
    <script type="module" src="/hm-docs/assets/app.5c44d29a.js"></script>
    <link rel="preload" href="/hm-docs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
  <link rel="modulepreload" href="/hm-docs/assets/chunks/framework.956eca13.js">
  <link rel="modulepreload" href="/hm-docs/assets/chunks/theme.bb7bd755.js">
  <link rel="modulepreload" href="/hm-docs/assets/hr_Day01-项目介绍及初始化-登录页面.md.a87e2d0f.lean.js">
  <link rel="icon" type="image/svg+xml" href="./logo2.png">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-99cf8a88><!--[--><!--]--><!--[--><span tabindex="-1" data-v-ae3e3f51></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-ae3e3f51> Skip to content </a><!--]--><!----><header class="VPNav" data-v-99cf8a88 data-v-7e5bc4a5><div class="VPNavBar has-sidebar" data-v-7e5bc4a5 data-v-381568bf><div class="container" data-v-381568bf><div class="title" data-v-381568bf><div class="VPNavBarTitle has-sidebar" data-v-381568bf data-v-305adf00><a class="title" href="/hm-docs/" data-v-305adf00><!--[--><!--]--><!--[--><img class="VPImage logo" src="/hm-docs/logo2.png" alt data-v-6db2186b><!--]--><!--[-->优医问诊H5<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-381568bf><div class="curtain" data-v-381568bf></div><div class="content-body" data-v-381568bf><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-381568bf><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-381568bf data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/vue2/base.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->vue2<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/vue2/vuex.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->vuex<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/interview/%E9%9D%A2%E7%BB%8FH5%E7%AB%AF01.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->面经<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/hm-docs/hr/Day01-%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D%E5%8F%8A%E5%88%9D%E5%A7%8B%E5%8C%96-%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->人资<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/hmzs/%E5%89%8D%E5%8F%B0%E5%8F%AF%E8%A7%86%E5%8C%96/01-%E9%A1%B9%E7%9B%AE%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->黑马智数<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/mini-rabbit/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->小兔鲜儿<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/ts/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->TypeScript<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/vue3/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->Vue3<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/pinia/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->Pinia<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/project/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->优医问诊<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/other-resource/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->其它<!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-381568bf data-v-f6a63727><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-f6a63727 data-v-82b282f1 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-82b282f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-82b282f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-381568bf data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink" href="https://gitee.com/luckybo0027" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-36371990><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-381568bf data-v-40855f84 data-v-764effdf><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-764effdf><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-764effdf><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-764effdf><div class="VPMenu" data-v-764effdf data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-82b282f1 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-82b282f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-82b282f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink" href="https://gitee.com/luckybo0027" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-36371990><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-381568bf data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-99cf8a88 data-v-a97031cc><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a97031cc><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-a97031cc><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-a97031cc>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a97031cc data-v-687955bc><button data-v-687955bc>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-99cf8a88 data-v-54885d6c><div class="curtain" data-v-54885d6c></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-54885d6c><span class="visually-hidden" id="sidebar-aria-label" data-v-54885d6c> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-54885d6c><section class="VPSidebarItem level-0 has-active" data-v-54885d6c data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>面经H5</h2><!----></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day01-%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D%E5%8F%8A%E5%88%9D%E5%A7%8B%E5%8C%96-%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day01</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day02-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97-%E4%B8%BB%E9%A1%B5%E9%89%B4%E6%9D%83.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day02</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day03-%E4%B8%BB%E9%A1%B5%E6%A8%A1%E5%9D%97-%E4%BF%AE%E6%94%B9%E5%AF%86%E7%A0%81.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day03</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day04-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day04</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day05-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84-%E8%A7%92%E8%89%B2%E7%AE%A1%E7%90%86.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day05</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day06-%E8%A7%92%E8%89%B2%E7%AE%A1%E7%90%86-%E5%91%98%E5%B7%A5%E7%AE%A1%E7%90%86.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day06</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day07-%E5%91%98%E5%B7%A5%E7%AE%A1%E7%90%86-%E4%B8%8A%E4%BC%A0%E4%B8%8B%E8%BD%BD.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day07</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day08-Cos%E4%B8%8A%E4%BC%A0%E5%92%8C%E6%9D%83%E9%99%90%E6%95%B0%E6%8D%AE.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day08</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day09-%E6%9D%83%E9%99%90%E5%BA%94%E7%94%A8-%E9%A6%96%E9%A1%B5.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day09</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day10-%E9%A6%96%E9%A1%B5%E5%9B%BE%E8%A1%A8-Nginx%E4%B8%8A%E7%BA%BF.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day10</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-99cf8a88 data-v-97b5189c><div class="VPDoc has-sidebar has-aside" data-v-97b5189c data-v-e9631fd0><!--[--><!--]--><div class="container" data-v-e9631fd0><div class="aside" data-v-e9631fd0><div class="aside-curtain" data-v-e9631fd0></div><div class="aside-container" data-v-e9631fd0><div class="aside-content" data-v-e9631fd0><div class="VPDocAside" data-v-e9631fd0 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-3f215769 data-v-ff0f39c8><div class="content" data-v-ff0f39c8><div class="outline-marker" data-v-ff0f39c8></div><div class="outline-title" data-v-ff0f39c8>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0f39c8><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0f39c8> Table of Contents for current page </span><ul class="root" data-v-ff0f39c8 data-v-b0ff2abe><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-e9631fd0><div class="content-container" data-v-e9631fd0><!--[--><!--]--><!----><main class="main" data-v-e9631fd0><div style="position:relative;" class="vp-doc _hm-docs_hr_Day01-%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D%E5%8F%8A%E5%88%9D%E5%A7%8B%E5%8C%96-%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2" data-v-e9631fd0><div><h1 id="_1-人力资源项目介绍" tabindex="-1">1.人力资源项目介绍 <a class="header-anchor" href="#_1-人力资源项目介绍" aria-label="Permalink to &quot;1.人力资源项目介绍&quot;">​</a></h1><h3 id="_1-1-项目架构和解决方案" tabindex="-1">1.1 项目架构和解决方案 <a class="header-anchor" href="#_1-1-项目架构和解决方案" aria-label="Permalink to &quot;1.1 项目架构和解决方案&quot;">​</a></h3><p><img src="/hm-docs/assets/1677638069702-b1d74f78-3c4d-4491-bbcb-5984cd6a2740.cd1d02e6.png#averageHue=#526a27&amp;clientId=u27a6c102-7f89-4&amp;from=paste&amp;height=529&amp;id=ub74513ae&amp;name=image.png&amp;originHeight=1058&amp;originWidth=2164&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=236996&amp;status=done&amp;style=none&amp;taskId=u8aa4e64f-2e8e-46fc-b2eb-bbc40084251&amp;title=&amp;width=1082" alt="image.png" data-fancybox="gallery"></p><h3 id="_1-2-课程安排" tabindex="-1">1.2 课程安排 <a class="header-anchor" href="#_1-2-课程安排" aria-label="Permalink to &quot;1.2 课程安排&quot;">​</a></h3><p><img src="/hm-docs/assets/1677638782885-2deeb032-d14b-414a-96c6-327f92556f19.815d412f.png#averageHue=#cf8b85&amp;clientId=ud3ec7d2a-274d-4&amp;from=paste&amp;height=567&amp;id=uc976fb79&amp;name=image.png&amp;originHeight=1134&amp;originWidth=1840&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=158299&amp;status=done&amp;style=none&amp;taskId=uc07f59b9-3667-4883-8194-2493d06660f&amp;title=&amp;width=920" alt="image.png" data-fancybox="gallery"></p><h3 id="_1-3-课程具备能力" tabindex="-1">1.3 课程具备能力 <a class="header-anchor" href="#_1-3-课程具备能力" aria-label="Permalink to &quot;1.3 课程具备能力&quot;">​</a></h3><p><img src="/hm-docs/assets/1677638817350-1233e8af-2c01-419d-ae0b-21fd71338458.e543d729.png#averageHue=#94bd4b&amp;clientId=ud3ec7d2a-274d-4&amp;from=paste&amp;height=619&amp;id=u0de52d47&amp;name=image.png&amp;originHeight=1238&amp;originWidth=2758&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=293029&amp;status=done&amp;style=none&amp;taskId=u42e4b301-34e9-4f99-859f-c5d6d34b3f3&amp;title=&amp;width=1379" alt="image.png" data-fancybox="gallery"></p><h3 id="_1-4-课程地址" tabindex="-1">1.4 课程地址 <a class="header-anchor" href="#_1-4-课程地址" aria-label="Permalink to &quot;1.4 课程地址&quot;">​</a></h3><ul><li>vue-element-admin文档地址：<a href="https://panjiachen.gitee.io/vue-element-admin-site/zh/" target="_blank" rel="noreferrer">链接</a></li><li>演示地址： <a href="https://heimahr.itheima.net/dashboard" target="_blank" rel="noreferrer">链接</a></li></ul><h1 id="_2-拉取项目基础代码" tabindex="-1">2. 拉取项目基础代码 <a class="header-anchor" href="#_2-拉取项目基础代码" aria-label="Permalink to &quot;2. 拉取项目基础代码&quot;">​</a></h1><ul><li>拉取命令</li></ul><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">git</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">clone</span><span style="color:#A6ACCD;">  </span><span style="color:#C3E88D;">https://github.com/PanJiaChen/vue-admin-template.git</span><span style="color:#A6ACCD;">  </span><span style="color:#C3E88D;">heimahr</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li>升级core-js版本到<strong>3.25.5</strong></li></ul><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">core-js@3.25.5</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;"># npm</span></span>
<span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">yarn</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">core-js@3.25.5</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;"># yarn</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ul><li>安装完整依赖</li></ul><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;"># npm</span></span>
<span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">yarn</span><span style="color:#A6ACCD;">  </span><span style="color:#676E95;font-style:italic;"># yarn</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ul><li>启动命令在package.json中查看</li></ul><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">yarn</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">dev</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li>需要检查VsCode本身的插件ESLint 和 Vutur</li></ul><p><img src="/hm-docs/assets/1659364299958-47e73c1f-2f5c-42e6-8fd2-bfbad780409e.2682a5d0.png#averageHue=#9bc3ab&amp;clientId=uf62994b2-772f-4&amp;from=paste&amp;height=512&amp;id=u6a6eec52&amp;name=image.png&amp;originHeight=512&amp;originWidth=1608&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=218110&amp;status=done&amp;style=none&amp;taskId=u2732c5b4-866a-4d9c-82df-288bb980d87&amp;title=&amp;width=1608" alt="image.png" data-fancybox="gallery"></p><h1 id="_3-项目目录和入口文件介绍" tabindex="-1">3.项目目录和入口文件介绍 <a class="header-anchor" href="#_3-项目目录和入口文件介绍" aria-label="Permalink to &quot;3.项目目录和入口文件介绍&quot;">​</a></h1><ul><li>项目目录</li></ul><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">src</span><span style="color:#A6ACCD;">                        </span><span style="color:#676E95;font-style:italic;"># 源代码目录</span></span>
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;">   </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">api</span><span style="color:#A6ACCD;">                    </span><span style="color:#676E95;font-style:italic;"># 所有请求</span></span>
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;">   </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">assets</span><span style="color:#A6ACCD;">                 </span><span style="color:#676E95;font-style:italic;"># 主题 字体等静态资源</span></span>
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;">   </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">components</span><span style="color:#A6ACCD;">             </span><span style="color:#676E95;font-style:italic;"># 全局公用组件</span></span>
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;">   </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">icons</span><span style="color:#A6ACCD;">                  </span><span style="color:#676E95;font-style:italic;"># 项目所有 svg icons</span></span>
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;">   </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">layout</span><span style="color:#A6ACCD;">                 </span><span style="color:#676E95;font-style:italic;"># 全局 layout</span></span>
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;">   </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">router</span><span style="color:#A6ACCD;">                 </span><span style="color:#676E95;font-style:italic;"># 路由</span></span>
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;">   </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">store</span><span style="color:#A6ACCD;">                  </span><span style="color:#676E95;font-style:italic;"># 全局 store管理</span></span>
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;">   </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">styles</span><span style="color:#A6ACCD;">                 </span><span style="color:#676E95;font-style:italic;"># 全局样式</span></span>
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;">   </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">utils</span><span style="color:#A6ACCD;">                  </span><span style="color:#676E95;font-style:italic;"># 全局公用方法</span></span>
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;">   </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">views</span><span style="color:#A6ACCD;">                  </span><span style="color:#676E95;font-style:italic;"># views 所有页面</span></span>
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;">   </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">App.vue</span><span style="color:#A6ACCD;">                </span><span style="color:#676E95;font-style:italic;"># 入口页面</span></span>
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;">   </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">main.js</span><span style="color:#A6ACCD;">                </span><span style="color:#676E95;font-style:italic;"># 入口文件 加载组件 初始化等</span></span>
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;">   </span><span style="color:#C3E88D;">└──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">permission.js</span><span style="color:#A6ACCD;">          </span><span style="color:#676E95;font-style:italic;"># 权限管理</span></span>
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;">   </span><span style="color:#C3E88D;">└──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">settings.js</span><span style="color:#A6ACCD;">            </span><span style="color:#676E95;font-style:italic;"># 配置文件</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><ul><li>入口文件</li></ul><p><img src="/hm-docs/assets/1677639601650-458e85fc-929d-4283-8269-e0cfd126d7b3.6f185954.png#averageHue=#f6f9f0&amp;clientId=ud3ec7d2a-274d-4&amp;from=paste&amp;height=492&amp;id=u7c509a22&amp;name=image.png&amp;originHeight=984&amp;originWidth=1326&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=46177&amp;status=done&amp;style=none&amp;taskId=u9243a48a-aa3d-4544-bc44-8badf5a90c6&amp;title=&amp;width=663" alt="image.png" data-fancybox="gallery"></p><h1 id="_4-app-vue根组件解析" tabindex="-1">4.App.vue根组件解析 <a class="header-anchor" href="#_4-app-vue根组件解析" aria-label="Permalink to &quot;4.App.vue根组件解析&quot;">​</a></h1><ul><li>App.vue组件</li></ul><p><img src="/hm-docs/assets/1677639734533-f9c83c9d-9d5f-4ddd-8eff-b3c83db92c57.e19e29ac.png#averageHue=#fefefe&amp;clientId=ud3ec7d2a-274d-4&amp;from=paste&amp;height=553&amp;id=ufe990178&amp;name=image.png&amp;originHeight=1106&amp;originWidth=2170&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=88375&amp;status=done&amp;style=none&amp;taskId=u2577d214-b4a7-484c-82bc-872cbb8f20b&amp;title=&amp;width=1085" alt="image.png" data-fancybox="gallery"></p><ul><li>layout布局</li></ul><p><img src="/hm-docs/assets/1677639748076-1d466f54-67c1-4b6e-8744-c53ec8e4b6b9.9a2254cb.png#averageHue=#95b54b&amp;clientId=ud3ec7d2a-274d-4&amp;from=paste&amp;height=481&amp;id=ucdd357e7&amp;name=image.png&amp;originHeight=962&amp;originWidth=2548&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=52548&amp;status=done&amp;style=none&amp;taskId=ub9aae84e-55db-4d60-93d8-54620825eaf&amp;title=&amp;width=1274" alt="image.png" data-fancybox="gallery"></p><h1 id="_5-基础设置settings-js和导航守卫permission-js" tabindex="-1">5.基础设置settings.js和导航守卫permission.js <a class="header-anchor" href="#_5-基础设置settings-js和导航守卫permission-js" aria-label="Permalink to &quot;5.基础设置settings.js和导航守卫permission.js&quot;">​</a></h1><p><img src="/hm-docs/assets/1677639923771-14256f1c-309c-425e-89e9-66a22a593090.3edd52e6.png#averageHue=#20201f&amp;clientId=ud3ec7d2a-274d-4&amp;from=paste&amp;height=508&amp;id=ub171e779&amp;name=image.png&amp;originHeight=1016&amp;originWidth=1246&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=133769&amp;status=done&amp;style=none&amp;taskId=u86833936-6fc4-4f5d-8986-a2a0b98f0b1&amp;title=&amp;width=623" alt="image.png" data-fancybox="gallery"> settings.js导出网站基础配置，包括：网站标题、固定header、显示logo permission.js(权限)，主要负责路由导航守卫</p><h1 id="_6-vuex的结构" tabindex="-1">6.Vuex的结构 <a class="header-anchor" href="#_6-vuex的结构" aria-label="Permalink to &quot;6.Vuex的结构&quot;">​</a></h1><ul><li>模板中的结构</li></ul><p><img src="/hm-docs/assets/1677640092537-3312b3af-d04a-4dd5-bfff-5e6f2da4a49f.55eddeef.png#averageHue=#fefefe&amp;clientId=ud3ec7d2a-274d-4&amp;from=paste&amp;height=422&amp;id=ue30fae1f&amp;name=image.png&amp;originHeight=844&amp;originWidth=2640&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=104404&amp;status=done&amp;style=none&amp;taskId=u11771e23-4ccb-4c32-8052-3fa68827d7b&amp;title=&amp;width=1320" alt="image.png" data-fancybox="gallery"><img src="/hm-docs/assets/1677640123080-97dd11f7-ebe2-4120-a678-0894d444d1ce.a129b606.png#averageHue=#201f1f&amp;clientId=ud3ec7d2a-274d-4&amp;from=paste&amp;height=558&amp;id=ua4ffc2ca&amp;name=image.png&amp;originHeight=1116&amp;originWidth=1360&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=142833&amp;status=done&amp;style=none&amp;taskId=u1217faef-ae67-47cf-b92d-8be2a28dc95&amp;title=&amp;width=680" alt="image.png" data-fancybox="gallery"> 注意：人资资源项目主要针对**用户模块user **进行改造和重写</p><ul><li>Vuex的设计思想</li></ul><p>1.页面交互状态（折叠侧边栏-固定头部） <img src="/hm-docs/assets/1677640312841-479deeea-caa9-4664-827c-df4288dc6a2f.cb35fc0c.png#averageHue=#212121&amp;clientId=ud3ec7d2a-274d-4&amp;from=paste&amp;height=244&amp;id=u2ed66178&amp;name=image.png&amp;originHeight=648&amp;originWidth=1594&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=109484&amp;status=done&amp;style=none&amp;taskId=ub6fd4bef-4c86-4a3b-a696-4cd3a53bd85&amp;title=&amp;width=600" alt="image.png" data-fancybox="gallery"> 2.使用全局状态Vuex根据功能拆分成不同的模块（modules） <img src="/hm-docs/assets/1677640340361-8ee4e706-8834-49ae-bae8-58569f9b8492.c42ce234.png#averageHue=#1e1e1e&amp;clientId=ud3ec7d2a-274d-4&amp;from=paste&amp;height=211&amp;id=u7513036c&amp;name=image.png&amp;originHeight=422&amp;originWidth=758&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=31562&amp;status=done&amp;style=none&amp;taskId=uc360f2ee-0ccf-4c3c-a3df-42c49b5cc71&amp;title=&amp;width=379" alt="image.png" data-fancybox="gallery"> 3.进行状态管理通过getters建立对于模块中属性的快捷访问 <img src="/hm-docs/assets/1677640395635-1f821307-aa62-4c03-821b-b79b94a97798.347d4919.png#averageHue=#b8b77e&amp;clientId=ud3ec7d2a-274d-4&amp;from=paste&amp;height=195&amp;id=u11d55aac&amp;name=image.png&amp;originHeight=390&amp;originWidth=1276&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=67413&amp;status=done&amp;style=none&amp;taskId=u5c2c5b5f-14c3-4f8b-89da-1f834f697d5&amp;title=&amp;width=638" alt="image.png" data-fancybox="gallery"></p><h1 id="_7-使用模板中的icon图标" tabindex="-1">7.使用模板中的Icon图标 <a class="header-anchor" href="#_7-使用模板中的icon图标" aria-label="Permalink to &quot;7.使用模板中的Icon图标&quot;">​</a></h1><ul><li>src/icons/svg目录下的图标都可以使用</li></ul><p><img src="/hm-docs/assets/1677640480400-583a63ef-d270-4893-93cc-3a6738249d07.3b45cc2b.png#averageHue=#262627&amp;clientId=ud3ec7d2a-274d-4&amp;from=paste&amp;height=272&amp;id=u478dd639&amp;name=image.png&amp;originHeight=1100&amp;originWidth=720&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=3174296&amp;status=done&amp;style=none&amp;taskId=uec309321-2ea4-4792-a1ac-fa29e79c932&amp;title=&amp;width=178" alt="image.png" data-fancybox="gallery"></p><ul><li>图标文件名直接设置为svg-icon组件的iconClass属性</li></ul><p><img src="/hm-docs/assets/1677640547884-53a85baa-3a0e-4dc5-9d4f-c9ddb1364c34.86c3b3bd.png#averageHue=#272423&amp;clientId=ud3ec7d2a-274d-4&amp;from=paste&amp;height=110&amp;id=u50cc1a21&amp;name=image.png&amp;originHeight=266&amp;originWidth=1280&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=1364467&amp;status=done&amp;style=none&amp;taskId=u2c520021-f318-49c1-8549-3529a0aac08&amp;title=&amp;width=531" alt="image.png" data-fancybox="gallery"></p><h1 id="_8-扩展-解析icon图标的实现思路" tabindex="-1">8.扩展-解析Icon图标的实现思路 <a class="header-anchor" href="#_8-扩展-解析icon图标的实现思路" aria-label="Permalink to &quot;8.扩展-解析Icon图标的实现思路&quot;">​</a></h1><ul><li>引入目录所有的svg</li></ul><p><img src="/hm-docs/assets/1677640698454-71b9b26a-20d7-4d51-82ae-fb674c33fa0c.4a7f1a03.png#averageHue=#201f1f&amp;clientId=ud3ec7d2a-274d-4&amp;from=paste&amp;height=85&amp;id=u8e45866f&amp;name=image.png&amp;originHeight=170&amp;originWidth=1280&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=872056&amp;status=done&amp;style=none&amp;taskId=uff9dfd26-97f7-4571-ad9a-b135e7fb4eb&amp;title=&amp;width=640" alt="image.png" data-fancybox="gallery"></p><ul><li>全局注册svg-icon组件</li></ul><p><img src="/hm-docs/assets/1677640655098-0aceb937-dea6-468d-97a5-1451e41bfda3.7d08e764.png#averageHue=#21201f&amp;clientId=ud3ec7d2a-274d-4&amp;from=paste&amp;height=89&amp;id=ua9c42a2c&amp;name=image.png&amp;originHeight=238&amp;originWidth=1280&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=1220843&amp;status=done&amp;style=none&amp;taskId=u83c3b3ba-42d0-4354-bb7c-4ad3b7860fb&amp;title=&amp;width=476" alt="image.png" data-fancybox="gallery"></p><ul><li>loader插件打包svg</li></ul><p><img src="/hm-docs/assets/1677640818980-5b7c4145-b023-4fb7-87a9-5f9c927696e5.d361fd58.png#averageHue=#222020&amp;clientId=ud3ec7d2a-274d-4&amp;from=paste&amp;height=305&amp;id=ufbee4883&amp;name=image.png&amp;originHeight=805&amp;originWidth=720&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=2323035&amp;status=done&amp;style=none&amp;taskId=u76b4288a-987d-451c-ac64-4a44228c40d&amp;title=&amp;width=273" alt="image.png" data-fancybox="gallery"></p><ul><li>svg-icon引用svg的链接</li></ul><p><img src="/hm-docs/assets/1677640847037-8ecda371-e9ed-44e0-b333-6b5f0dac6f33.cb0e927d.png#averageHue=#232121&amp;clientId=ud3ec7d2a-274d-4&amp;from=paste&amp;height=183&amp;id=u105cf8e3&amp;name=image.png&amp;originHeight=517&amp;originWidth=1280&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=2651917&amp;status=done&amp;style=none&amp;taskId=u2cd0334e-b5ce-4f98-b89e-3799ef56260&amp;title=&amp;width=452" alt="image.png" data-fancybox="gallery"></p><ul><li>知识扩展</li></ul><p>1.了解：require.context(路径，是否扫描子目录， 正则匹配) 可以引入某个目录下的内容 2.了解：svg-sprite-loader打包了所有svg到一个svg标签上，将svg名称作为symbol标签的id属性 3.了解：svg-icon使用iconClass属性引用了symbol的id</p><h1 id="_9-1-导入样式资源并使用git管理" tabindex="-1">9.1.导入样式资源并使用git管理 <a class="header-anchor" href="#_9-1-导入样式资源并使用git管理" aria-label="Permalink to &quot;9.1.导入样式资源并使用git管理&quot;">​</a></h1><ul><li>将教学资源中的初始化**图片-样式-svg **拷贝到src目录下</li></ul><p><img src="/hm-docs/assets/1677658346411-2d854c54-1178-4f98-8410-d08eaabf267b.1f3f4eda.png#averageHue=#fcfcfc&amp;clientId=ud3ec7d2a-274d-4&amp;from=paste&amp;height=146&amp;id=uba19f391&amp;name=image.png&amp;originHeight=498&amp;originWidth=1280&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=2554459&amp;status=done&amp;style=none&amp;taskId=u318bfd9d-acbd-4977-b65e-868973dd4d6&amp;title=&amp;width=374" alt="image.png" data-fancybox="gallery"></p><blockquote><p>因为项目是从github上拉取下来的，所以git记录了之前模版的信息，所以删除需要建立git</p></blockquote><ul><li>删除原有的.git文件</li><li>初始化仓库</li></ul><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">git</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">init</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;"># 初始化仓库</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li>添加到暂存区</li></ul><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">git</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">.</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;"># 添加到暂存区</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li>提交本地仓库</li></ul><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">git</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">commit</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-m</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">初始化人力资源项目</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;"># 提交本地仓库</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><blockquote><p>接下来，同学们需要在gitee上新建一个自己的远程仓库，然后将本地的仓库推送到远程仓库托管</p></blockquote><ul><li>本地仓库配置远程仓库地址</li></ul><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">git</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">remote</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">origin</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#C3E88D;">你的远程仓库地</span><span style="color:#A6ACCD;">址</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">  </span><span style="color:#676E95;font-style:italic;"># 本地仓库配置远程仓库地址</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li>推送到远程仓库</li></ul><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">git</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">push</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-u</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">origin</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">master</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;"># 推送到远程仓库</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h1 id="_9-2-清除无关代码" tabindex="-1">9.2.清除无关代码 <a class="header-anchor" href="#_9-2-清除无关代码" aria-label="Permalink to &quot;9.2.清除无关代码&quot;">​</a></h1><blockquote><p>删除MockJS相关代码 MockJS是提供假数据的，类似json-server，开发项目目前不需要使用。 删除删除代码</p></blockquote><ol><li><code>main.js</code></li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">/**</span></span>
<span class="line"><span style="color:#A6ACCD;"> * If you don&#39;t want to use mock-server</span></span>
<span class="line"><span style="color:#A6ACCD;"> * you want to use MockJs for mock api</span></span>
<span class="line"><span style="color:#A6ACCD;"> * you can execute: mockXHR()</span></span>
<span class="line"><span style="color:#A6ACCD;"> *</span></span>
<span class="line"><span style="color:#A6ACCD;"> * Currently MockJs will be used in the production environment,</span></span>
<span class="line"><span style="color:#A6ACCD;"> * please remove it before going online ! ! !</span></span>
<span class="line"><span style="color:#A6ACCD;"> */</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#F07178;">if (p<wbr>rocess.env.NODE_ENV === &#39;production&#39;) {</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#F07178;">  const { mockXHR } = require(&#39;../mock&#39;)</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#F07178;">  mockXHR()</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#F07178;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><ol start="2"><li><code>vue.config.js</code></li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">devServer: {</span></span>
<span class="line"><span style="color:#A6ACCD;">    port: port,</span></span>
<span class="line"><span style="color:#A6ACCD;">    open: true,</span></span>
<span class="line"><span style="color:#A6ACCD;">    overlay: {</span></span>
<span class="line"><span style="color:#A6ACCD;">      warnings: false,</span></span>
<span class="line"><span style="color:#A6ACCD;">      errors: true</span></span>
<span class="line"><span style="color:#A6ACCD;">    },</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#F07178;">   before: require(&#39;./mock/mock-server.js&#39;)</span></span>
<span class="line"><span style="color:#A6ACCD;">  },</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ol start="3"><li>删除mock文件夹</li><li>重启打包</li></ol><h1 id="_10-登录页的结构和表单" tabindex="-1">10.登录页的结构和表单 <a class="header-anchor" href="#_10-登录页的结构和表单" aria-label="Permalink to &quot;10.登录页的结构和表单&quot;">​</a></h1><blockquote><p>接下来需要实现登录页的表单结构和表单内容</p></blockquote><p><img src="/hm-docs/assets/1677658662771-f85ecb01-134c-4469-9de4-233a425e07cb.634b16c7.png#averageHue=#e4e9fc&amp;clientId=ud3ec7d2a-274d-4&amp;from=paste&amp;height=250&amp;id=uc992a3cf&amp;name=image.png&amp;originHeight=720&amp;originWidth=896&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=2585454&amp;status=done&amp;style=none&amp;taskId=u03a60f9b-30ce-4c00-bbf9-4cba44744dd&amp;title=&amp;width=311" alt="image.png" data-fancybox="gallery"></p><ul><li>拷贝登录页的基本结构布局-代码位置(<strong>src/views/login/index.vue)</strong></li></ul><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">login-container</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">logo</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">form</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">登录</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-card</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">shadow</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">never</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">login-card</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#676E95;font-style:italic;">&lt;!--登录表单--&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">el-card</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">name </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Login</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">style</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">scss</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">login-container</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> flex</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">align-items</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> stretch</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100vh</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">logo</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">flex</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">background</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">rgba</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">38</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">72</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">176</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">url</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">../../assets/common/login_back.png</span><span style="color:#89DDFF;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">      no-repeat center </span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;"> cover</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">border-top-right-radius</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">60px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> flex</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">flex-direction</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> column</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">align-items</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> flex-end</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">justify-content</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">padding</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">icon</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">background</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">url</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">../../assets/common/logo.png</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> no-repeat </span><span style="color:#F78C6C;">70px</span><span style="color:#A6ACCD;"> center </span><span style="color:#89DDFF;">/</span></span>
<span class="line"><span style="color:#A6ACCD;">        contain</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">300px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">margin-bottom</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#FFCB6B;">p</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">fff</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">font-size</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">margin-top</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">20px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">300px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">text-align</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">form</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">flex</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> flex</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">flex-direction</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> column</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">justify-content</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">padding-left</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">176px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">el-card</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">border</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> none</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">padding</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#FFCB6B;">h1</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">padding-left</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">20px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">font-size</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">24px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">el-input</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">350px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">44px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">el-input__inner</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">background</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">f4f5fb</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">el-checkbox</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:#</span><span style="color:#A6ACCD;">606266</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br></div></div><ul><li>实现登录表单的结构</li></ul><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">form</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">登录</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-card</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">shadow</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">never</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">login-card</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!--登录表单--&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- el-form &gt; el-form-item &gt; el-input --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-form</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-form-item</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">placeholder</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">请输入手机号</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">el-form-item</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-form-item</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">placeholder</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">请输入密码</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">el-form-item</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-form-item</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-checkbox</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          用户平台使用协议</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">el-checkbox</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">el-form-item</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-form-item</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width:350px</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">primary</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">登录</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">el-button</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">   </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">el-form-item</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">el-form</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><ul><li>提交代码</li></ul><h1 id="_11-登录表单校验-实现" tabindex="-1">11.登录表单校验-实现 <a class="header-anchor" href="#_11-登录表单校验-实现" aria-label="Permalink to &quot;11.登录表单校验-实现&quot;">​</a></h1><ol><li>定义数据和校验规则</li></ol><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">export default {</span></span>
<span class="line"><span style="color:#A6ACCD;">  name: &#39;Login&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">  name: &#39;Login&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">  data() {</span></span>
<span class="line"><span style="color:#A6ACCD;">    return {</span></span>
<span class="line"><span style="color:#A6ACCD;">      loginForm: {</span></span>
<span class="line"><span style="color:#A6ACCD;">        mobile: &#39;&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">        password: &#39;&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">        isAgree: false</span></span>
<span class="line"><span style="color:#A6ACCD;">      },</span></span>
<span class="line"><span style="color:#A6ACCD;">      loginRules: {</span></span>
<span class="line"><span style="color:#A6ACCD;">        mobile: [{</span></span>
<span class="line"><span style="color:#A6ACCD;">          required: true,</span></span>
<span class="line"><span style="color:#A6ACCD;">          message: &#39;请输入手机号&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">          trigger: &#39;blur&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">        }, {</span></span>
<span class="line"><span style="color:#A6ACCD;">          pattern: /^1[3-9]\d{9}$/,</span></span>
<span class="line"><span style="color:#A6ACCD;">          message: &#39;手机号格式不正确&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">          trigger: &#39;blur&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        }],</span></span>
<span class="line"><span style="color:#A6ACCD;">        password: [{</span></span>
<span class="line"><span style="color:#A6ACCD;">          required: true,</span></span>
<span class="line"><span style="color:#A6ACCD;">          message: &#39;请输入密码&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">          trigger: &#39;blur&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">        }, {</span></span>
<span class="line"><span style="color:#A6ACCD;">          min: 6,</span></span>
<span class="line"><span style="color:#A6ACCD;">          max: 16,</span></span>
<span class="line"><span style="color:#A6ACCD;">          message: &#39;密码长度应该为6-16位之间&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">          trigger: &#39;blur&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        }],</span></span>
<span class="line"><span style="color:#A6ACCD;">        // required只能检查 null &quot;&quot; undefined</span></span>
<span class="line"><span style="color:#A6ACCD;">        isAgree: [{</span></span>
<span class="line"><span style="color:#A6ACCD;">          validator: (rule, value, callback) =&gt; {</span></span>
<span class="line"><span style="color:#A6ACCD;">            // rule规则</span></span>
<span class="line"><span style="color:#A6ACCD;">            // value检查的数据 true/false</span></span>
<span class="line"><span style="color:#A6ACCD;">            // callback 函数 执行这个函数</span></span>
<span class="line"><span style="color:#A6ACCD;">            // 成功执行callback 失败也执行callback(错误对象 new Error(错误信息))</span></span>
<span class="line"><span style="color:#A6ACCD;">            value ? callback() : callback(new Error(&#39;没有勾选用户平台协议&#39;))</span></span>
<span class="line"><span style="color:#A6ACCD;">          }</span></span>
<span class="line"><span style="color:#A6ACCD;">        }]</span></span>
<span class="line"><span style="color:#A6ACCD;">      }</span></span>
<span class="line"><span style="color:#A6ACCD;">    }</span></span>
<span class="line"><span style="color:#A6ACCD;">  },</span></span>
<span class="line"><span style="color:#A6ACCD;">  methods: {</span></span>
<span class="line"><span style="color:#A6ACCD;">    login() {</span></span>
<span class="line"><span style="color:#A6ACCD;">      this.$refs.form.validate((isOK) =&gt; {</span></span>
<span class="line"><span style="color:#A6ACCD;">        if (isOK) {</span></span>
<span class="line"><span style="color:#A6ACCD;">          alert(&#39;校验通过&#39;)</span></span>
<span class="line"><span style="color:#A6ACCD;">        }</span></span>
<span class="line"><span style="color:#A6ACCD;">      })</span></span>
<span class="line"><span style="color:#A6ACCD;">    }</span></span>
<span class="line"><span style="color:#A6ACCD;">  }</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br></div></div><ol start="2"><li>绑定组件的对应属性</li></ol><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-form</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">ref</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">form</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">loginForm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">rules</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">loginRules</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;el-form-item prop=&quot;mobile&quot;&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">            &lt;el-input v-model=&quot;loginForm.mobile&quot; placeholder=&quot;请输入手机号&quot; /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;/el-form-item&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;el-form-item prop=&quot;password&quot;&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;el-input v-model=&quot;loginForm.password&quot; show-password placeholder=&quot;请输入密码&quot; /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;/el-form-item&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;el-form-item prop=&quot;isAgree&quot;&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;el-checkbox v-model=&quot;loginForm.isAgree&quot;&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">              用户平台使用协议</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;/el-checkbox&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;/el-form-item&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;el-form-item&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;el-button style=&quot;width:350px&quot; type=&quot;primary&quot; @click=&quot;login&quot;&gt;登录&lt;/el-button&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;/el-form-item&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">el-form</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-e9631fd0 data-v-face870a><!--[--><!--]--><div class="edit-info" data-v-face870a><!----><div class="last-updated" data-v-face870a><p class="VPLastUpdated" data-v-face870a data-v-149a99df>更新: <time datetime="2023-08-31T13:50:55.000Z" data-v-149a99df></time></p></div></div><div class="prev-next" data-v-face870a><div class="pager" data-v-face870a><!----></div><div class="pager" data-v-face870a><a class="pager-link next" href="/hm-docs/hr/Day02-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97-%E4%B8%BB%E9%A1%B5%E9%89%B4%E6%9D%83.html" data-v-face870a><span class="desc" data-v-face870a>Next page</span><span class="title" data-v-face870a>Day02</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-99cf8a88 data-v-f4388a15><div class="container" data-v-f4388a15><p class="message" data-v-f4388a15>Released under the MIT License.</p><p class="copyright" data-v-f4388a15>Copyright © 2022-present Shugang Zhou 传智教育</p></div></footer><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"d89339df\",\"electron_eletron.md\":\"f78b205d\",\"hmzs_前台可视化_04-部署上线说明.md\":\"b689f494\",\"geek-park_03-布局容器.md\":\"f9a95023\",\"hmzs_前台可视化_03-接入微前端.md\":\"e4e73fe1\",\"geek-park_index.md\":\"274ee860\",\"hr_day01-项目介绍及初始化-登录页面.md\":\"a87e2d0f\",\"hmzs_前台可视化_01-项目环境搭建.md\":\"7fa65aa4\",\"hr_day02-登录模块-主页鉴权.md\":\"7c74ca95\",\"geek-park_02-登录页面.md\":\"6ab1a2cf\",\"memory.md\":\"22cd8c53\",\"mini-rabbit_01-项目.md\":\"3c3d7316\",\"geek-park_01-项目准备.md\":\"23a5f83b\",\"hr_day10-首页图表-nginx上线.md\":\"8a2d49ab\",\"other-resource_index.md\":\"e64d1d24\",\"mini-rabbit_04-分类.md\":\"26f22ed4\",\"interview_面经pc端02.md\":\"88e355b4\",\"hr_day05-组织架构-角色管理.md\":\"bef256c2\",\"hr_day08-cos上传和权限数据.md\":\"c03b8bcb\",\"hr_day03-主页模块-修改密码.md\":\"bc380dd0\",\"mini-rabbit_index.md\":\"9e57a010\",\"hr_day04-组织架构.md\":\"e838901c\",\"hmzs_前台可视化_02-大屏可视化.md\":\"98a26e50\",\"mini-rabbit_09-购物车.md\":\"0a823f26\",\"pinia_index.md\":\"e132c8fe\",\"ts_pro.md\":\"fe9a6545\",\"hr_day06-角色管理-员工管理.md\":\"beb02c6b\",\"mini-rabbit_03-推荐.md\":\"faed0355\",\"mini-rabbit_06-地址.md\":\"1fc49004\",\"interview_面经h5端02.md\":\"a7342342\",\"mini-rabbit_08-sku.md\":\"0775a2c7\",\"ts_backup.md\":\"55f33e6d\",\"hr_day07-员工管理-上传下载.md\":\"dea880ea\",\"vue2_base.md\":\"b804c94a\",\"project_super-doctor.md\":\"f0b1af73\",\"interview_面经h5端01.md\":\"e9040838\",\"geek-park_04-个人中心.md\":\"f16a09df\",\"ts_case.md\":\"7cd17957\",\"vue3_index.md\":\"5e17a031\",\"interview_面经pc端01.md\":\"d7141b56\",\"ts_index.md\":\"a01dfcff\",\"vue3_case.md\":\"d48addba\",\"project_login.md\":\"c54c8b93\",\"project_index.md\":\"6674c051\",\"mini-rabbit_02-首页.md\":\"299b4f8e\",\"project_end.md\":\"cb143198\",\"vue2_vuex.md\":\"a087fc79\",\"ts_advanced.md\":\"319200c0\",\"ts_core.md\":\"fb357910\",\"project_home.md\":\"86083086\",\"project_user.md\":\"c888dc36\",\"vue3_composition.md\":\"72ec4356\",\"mini-rabbit_07-详情.md\":\"1fe593a3\",\"mini-rabbit_10-订单.md\":\"732bea0a\",\"project_consult.md\":\"44bd936e\",\"project_room.md\":\"e43da8e9\",\"mini-rabbit_05-登录.md\":\"0cae2bde\",\"project_order.md\":\"8793ea0c\",\"project_consult-order.md\":\"8f1e59fa\",\"hr_day09-权限应用-首页.md\":\"4ca0b809\"}")
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"优医问诊H5\",\"description\":\"最新Vue3技术栈,Vue3,TS,Pinia,Vant,在线问诊项目,H5\",\"base\":\"/hm-docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo2.png\",\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"vue2\",\"link\":\"/vue2/base\"},{\"text\":\"vuex\",\"link\":\"/vue2/vuex\"},{\"text\":\"面经\",\"link\":\"/interview/面经H5端01\"},{\"text\":\"人资\",\"link\":\"/hr/Day01-项目介绍及初始化-登录页面\"},{\"text\":\"黑马智数\",\"link\":\"/hmzs/前台可视化/01-项目环境搭建\"},{\"text\":\"小兔鲜儿\",\"link\":\"/mini-rabbit/\"},{\"text\":\"TypeScript\",\"link\":\"/ts/\"},{\"text\":\"Vue3\",\"link\":\"/vue3/\"},{\"text\":\"Pinia\",\"link\":\"/pinia/\"},{\"text\":\"优医问诊\",\"link\":\"/project/\"},{\"text\":\"其它\",\"link\":\"/other-resource/\"}],\"sidebar\":{\"/vu2/\":[{\"text\":\"vue基础\",\"items\":[{\"text\":\"vue基础\",\"link\":\"/vu2/base\"}]}],\"/interview/\":[{\"text\":\"面经H5\",\"items\":[{\"text\":\"面经H5端-（上）\",\"link\":\"/interview/面经H5端01\"},{\"text\":\"面经H5端-（下）\",\"link\":\"/interview/面经H5端02\"},{\"text\":\"面经PC端-（上）\",\"link\":\"/interview/面经PC端01\"},{\"text\":\"面经PC端-（下）\",\"link\":\"/interview/面经PC端02\"}]}],\"/hr/\":[{\"text\":\"面经H5\",\"items\":[{\"text\":\"Day01\",\"link\":\"/hr/Day01-项目介绍及初始化-登录页面\"},{\"text\":\"Day02\",\"link\":\"/hr/Day02-登录模块-主页鉴权\"},{\"text\":\"Day03\",\"link\":\"/hr/Day03-主页模块-修改密码\"},{\"text\":\"Day04\",\"link\":\"/hr/Day04-组织架构\"},{\"text\":\"Day05\",\"link\":\"/hr/Day05-组织架构-角色管理\"},{\"text\":\"Day06\",\"link\":\"/hr/Day06-角色管理-员工管理\"},{\"text\":\"Day07\",\"link\":\"/hr/Day07-员工管理-上传下载\"},{\"text\":\"Day08\",\"link\":\"/hr/Day08-Cos上传和权限数据\"},{\"text\":\"Day09\",\"link\":\"/hr/Day09-权限应用-首页\"},{\"text\":\"Day10\",\"link\":\"/hr/Day10-首页图表-Nginx上线\"}]}],\"/hmzs/\":[{\"text\":\"黑马智数\",\"items\":[{\"text\":\"初始化项目\",\"link\":\"/hmzs/前台可视化/01-项目环境搭建\"},{\"text\":\"大屏可视化\",\"link\":\"/hmzs/前台可视化/02-大屏可视化\"},{\"text\":\"接入微前端\",\"link\":\"/hmzs/前台可视化/03-接入微前端\"},{\"text\":\"部署上线\",\"link\":\"/hmzs/前台可视化/04-部署上线说明\"}]}],\"/mini-rabbit/\":[{\"text\":\"小兔仙\",\"items\":[{\"link\":\"/mini-rabbit/01-项目\",\"text\":\"01-项目准备\"},{\"link\":\"/mini-rabbit/02-首页\",\"text\":\"02-首页模块\"},{\"link\":\"/mini-rabbit/03-推荐\",\"text\":\"03-推荐模块\"},{\"link\":\"/mini-rabbit/04-分类\",\"text\":\"04-分类模块\"},{\"link\":\"/mini-rabbit/05-登录\",\"text\":\"05-登录模块\"},{\"link\":\"/mini-rabbit/06-地址\",\"text\":\"06-地址模块\"},{\"link\":\"/mini-rabbit/07-详情\",\"text\":\"07-详情模块\"},{\"link\":\"/mini-rabbit/08-SKU\",\"text\":\"08-SKU模块\"},{\"link\":\"/mini-rabbit/09-购物车\",\"text\":\"09-购物车模块\"},{\"link\":\"/mini-rabbit/10-订单\",\"text\":\"10-订单模块\"}]}],\"/memory/\":[{\"text\":\"需要记忆的内容\",\"items\":[{\"link\":\"/memory/\",\"text\":\"需要记忆的内容\"}]}],\"/ts/\":[{\"text\":\"TypeScript\",\"items\":[{\"text\":\"TypeScript起步\",\"link\":\"/ts/\"},{\"text\":\"TypeScript核心\",\"link\":\"/ts/core\"},{\"text\":\"TypeScript进阶\",\"link\":\"/ts/advanced\"},{\"text\":\"TypeScript应用\",\"link\":\"/ts/pro\"},{\"text\":\"TS黑马头条案例\",\"link\":\"/ts/case\"}]}],\"/vue3/\":[{\"text\":\"Vue3核心\",\"items\":[{\"text\":\"快速开始\",\"link\":\"/vue3/\"},{\"text\":\"组合式API\",\"link\":\"/vue3/composition\"},{\"text\":\"综合案例\",\"link\":\"/vue3/case\"}]}],\"/pinia/\":[{\"text\":\"Pinia\",\"items\":[{\"text\":\"Pinia 核心\",\"link\":\"/pinia/\"}]}],\"/project/\":[{\"text\":\"优医问诊H5项目课程\",\"items\":[{\"text\":\"1. 项目起步\",\"link\":\"/project/\"},{\"text\":\"2. 登录模块\",\"link\":\"/project/login\"},{\"text\":\"3. 用户模块\",\"link\":\"/project/user\"},{\"text\":\"4. 首页模块\",\"link\":\"/project/home\"},{\"text\":\"5. 极速问诊\",\"link\":\"/project/consult\"},{\"text\":\"6. 医生问诊室\",\"link\":\"/project/room\"},{\"text\":\"7. 问诊订单模块\",\"link\":\"/project/consult-order\"},{\"text\":\"8. 药品订单模块\",\"link\":\"/project/order\"},{\"text\":\"9. 其他扩展\",\"link\":\"/project/end\"},{\"text\":\"辅助-超级医生\",\"link\":\"/project/super-doctor\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://gitee.com/luckybo0027\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2022-present Shugang Zhou 传智教育\"},\"lastUpdatedText\":\"更新\",\"outline\":\"deep\"},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
    
  </body>
</html>